<template>
  <el-container>
    <el-header>
      <el-page-header @back="goBack" content="轮播图管理" />
    </el-header>
    <el-main>
      <el-skeleton style="width:315px" :loading="loading" animated :count="3">
        <template slot="template">
          <el-skeleton-item
            variant="image"
            style="width: 315px; height: 267px;"
          />
          <div style="padding: 14px;">
            <el-skeleton-item variant="h3" style="width: 50%;" />
            <div
              style="display: flex; align-items: center; margin-top: 16px; height: 16px;"
            >
              <!--justify-items: space-between-->
              <el-skeleton-item variant="text" style="margin-right: 16px;" />
              <el-skeleton-item variant="text" style="width: 30%;" />
            </div>
          </div>
        </template>
        <template>
          <el-card
            style="margin-bottom: 10px"
            :body-style="{ padding: '0px', marginBottom: '1px' }"
            v-for="item in fluidPicList"
            :key="item.name"
          >
            <img :src="item.src" class="image multi-content" style="max-height: 100%;max-width: 100%" alt=""/>
            <div style="padding: 14px;">
              <span>{{ item.id}}</span>
              <div class="bottom card-header">
                <!--<span class="time">{{ currentDate }}</span>-->
                <el-button type="text" class="button" @click="up(item.pid)">上移</el-button>
                <el-button type="text" class="button" @click="down(item.pid)">下移</el-button>
                <el-button type="text" class="button" @click="update(item.pid)">替换</el-button>
                <el-button type="text" class="button" @click="delet(item.pid)">删除</el-button>
              </div>
            </div>

          </el-card>
          <el-dialog title="上传(每次最多上传一张)" :visible.sync="dialogOfUpload" width="80%" style="text-align: center;">

            <el-upload list-type="picture-card" action="http://localhost:8081/fluidPic/add" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="fileList" :on-change="handleChange"  accept=".jpg,.png,.jpeg" :limit=1 :before-upload="beforeUpload">
              <!--:on-preview="handlePictureCardPreview" :on-remove="handleRemove"-->
              <!--:on-preview="handlePictureCardPreview"-->
              <!--:on-remove="handleRemove"-->

                    <i class="el-icon-plus"></i>


              <!--list-type="picture-card"-->
            </el-upload>


            <div slot="footer" class="dialog-footer">
              <el-button @click="cancelUpload" >取消</el-button>
              <el-button type="primary" @click="confirmUpload()">确认上传</el-button>
            </div>
          </el-dialog>
          <el-button size="small" type="primary" @click="add">点击上传</el-button>
          <el-dialog :visible.sync="dialogVisible">
            <!--<img width="100%" :src="dialogImageUrl" alt="">-->
          </el-dialog>
          <el-dialog title="替换" :visible.sync="dialogOfUpdate" width="80%" style="text-align: center;">
            <el-alert title="请选择图片" type="error" effect="dark" id="imgNullAlert" style="display: none"></el-alert>
            <el-upload list-type="picture-card" action="http://localhost:8081/fluidPic/add" :on-change="handleChange2" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="updateFile" accept=".jpg,.png,.jpeg" :limit=1>

                <i class="el-icon-plus"></i>



            </el-upload>
              <div slot="footer" class="dialog-footer">
            <el-button style="margin-left: 10px" type="primary" @click="updateConfirm()">确认替换</el-button> <el-button @click="cancelUpdate()" >取消</el-button>
              </div>
          </el-dialog>
        </template>
      </el-skeleton>
    </el-main>
  </el-container>
</template>
<style>
  .el-upload-dragger{
    width: 250px;
  }
  .el-dialog__headerbtn{
      display: none;
  }
</style>

<script>

  import axios from "axios";
    export default {
        name: "fluid-after",
        data(){
          return {
            loading: true,
            // currentDate: '2022-08-08',
            dialogImageUrl: '',
            dialogVisible: false,
            fluidPicList:[],
            fileList: [],
            currentFile : "",
            updateFile: [],
            // headers:{
            //   'Content-Type': 'multipart/form-data'
            // },
            dialogOfUpload: false,
            fileCount: 0,
            dialogOfUpdate: false,
            limit: 1,
          }
        },
        mounted(){
          var _this = this;
          _this.loading = false
        },
        methods:{
          beforeUpload(file){
            // console.log('before');
            // if (this.fileList.length == 1){
            //     alert('一次只能上传一个图片哦');
            // }
          },
          goBack(){
            console.log('go back')
          },
          setLoading(){
            this.loading = true
            setTimeout(()=>(this.loading=false),2000)
          },
          handleRemove(file,fileList) {
            console.log(file, fileList);
          },
          handlePictureCardPreview(file){
            // console.log('handlePicture')
            var _this = this;
              if (_this.fileList.length <= 1){
                  _this.dialogImageUrl = file.url;
                  _this.dialogVisible = true;
              }
              else{
                  _this.dialogVisible = false;
              }

            // this.dialogImageUrl = file.url;
            // this.dialogVisible = true;
            // axios.get('http://localhost:8081/fluidPic/add').then(
            //         Response =>{
            //           this.fluidPicList = Response.data.data.fluidPicList;
            //         },
            //         error =>{
            //
            //         }
            // )
          },
          up(id){
              // console.log(id);
              // axios.get('http://localhost:8081/fluidPic/up?id='+id).then(
              //     Response =>{
              //         this.fluidPicList = Response.data.data.fluidPicList;
              //     },
              // )
            var _this = this;
            _this.axios({
              method: "get",
              url: "/fluidPic/up?id="+id,
            }).then(function (resp) {
              _this.fluidPicList = resp.data.data.fluidPicList;
            })
          },
          down(id){
            var _this = this;
            // axios.get('http://localhost:8081/fluidPic/down?id='+id).then(
            //     Response =>{
            //         _this.fluidPicList = Response.data.data.fluidPicList;
            //     },
            // )
            _this.axios({
              method: "get",
              url: "/fluidPic/down?id="+id,
            }).then(function (resp) {
              _this.fluidPicList = resp.data.data.fluidPicList;
            })
          },
          delet(id){
            var _this = this;
            if (_this.fluidPicList.length <=1 ){
              alert('不能再删了');
              return;
            }
            // console.log(id);
            // axios.get('http://localhost:8081/fluidPic/delete?id='+id).then(
            //         Response =>{
            //           _this.fluidPicList = Response.data.data.fluidPicList;
            //         },
            //         error=>{
            //
            //         }
            // )
            _this.axios({
              method: "get",
              url: "/fluidPic/delete?id="+id,
            }).then(function (resp) {
              _this.fluidPicList = resp.data.data.fluidPicList;
            })
          },
          cancelUpload(){
            var _this = this;
            _this.dialogOfUpload=false;
            _this.fileList = [];
          }
          ,
          handleChange(file, fileList){

            // this.currentFile = this.fileList[0].url;
            // console.log('currentFile: '+this.currentFile);
            // console.log('this.fileList: '+this.fileList);
            // console.log('filePath: '+file.getAbsolutePath());
            // console.log('fileList: '+fileList);
            // if (this.fileList.length > 1){
            //   alert('一次最多上传一个图片哦');
            //   // this.fileList.splice(1);
            //   console.log(this.fileList.length);
            //   // return;
            // }else{
            //     console.log(this.fileList.length);
            //
            // }
            var _this = this;
            _this.fileList = fileList;
          },
          handleChange2(file,fileList){
            var _this = this;
            _this.updateFile = fileList;
            if (_this.updateFile.length > 1){
              alert('一次最多上传一个图片哦');
              _this.updateFile[1]='';
            }
          },
          resetFileCount(){
            var _this = this;
            _this.fileCount = 0;
          }
          ,
          add(){
            // console.log('add');
            var _this = this;
            _this.dialogOfUpload = true;

            // var param = new FormData();
            // this.fileList.forEach(
            //         (val, index) => {
            //           param.append("file", val.raw);
            //         }
            // );
            // axios.post('http://localhost:8081/fluidPic/add',param).then(
            //         Response =>{
            //           this.fluidPicList = Response.data.data.fluidPicList;
            //         },
            //         error => {
            //
            //         })
          },
          confirmUpload(){
            var _this = this;
            if (_this.fileList==''||_this.fileList==null){
              var alert1 = document.getElementById("imgNullAlert");
              // alert1.style.display = "block";
              alert('未选择图片');
              return;
            }
            let param = new FormData();
            // console.log('fileList'+this.fileList[0]);
            _this.fileList.forEach(
                    (val, index) => {
                      param.append("file", val.raw);
                      // console.log(val.raw);
                      // console.log(param);
                    }
                    // (file) => {
                    //   param.append("file",file);
                    //   console.log(file);
                    // }
            );
            // axios.post('http://localhost:8081/fluidPic/confirmAdd',param).then(
            //         Response =>{
            //           _this.fluidPicList = Response.data.data.fluidPicList;
            //           _this.dialogOfUpload = false;
            //           // this.dialogImageUrl = '';
            //           // this.dialogVisible = false;
            //
            //           _this.fileList=[];
            // });
            _this.axios({
              method: "post",
              url: "/fluidPic/confirmAdd",
              data: param,
            }).then(function (resp) {
              _this.fluidPicList = resp.data.data.fluidPicList;
              _this.dialogOfUpload = false;
              _this.fileList=[];
            })
          },
          update(id){
            // console.log(id);
            var _this = this;
            _this.dialogOfUpdate = true;

            // axios.get('http://localhost:8081/fluidPic/update?id='+id).then(
            //
            // )
            _this.axios({
              method: "get",
              url: "/fluidPic/update?id="+id,
            }).then(function (resp) {

              }
            )

          },
          cancelUpdate(){
            var _this = this;
              _this.updateFile=[];
              _this.dialogOfUpdate = false;
          },
          updateConfirm(){
            var _this = this;
            if (this.updateFile.length==0||this.updateFile==null){
              alert('未选择文件');
              return;
            }
            let param = new FormData();
            this.updateFile.forEach(
                    (val,index) => {
                      param.append("file",val.raw);
                    }
            );
            // axios.post('http://localhost:8081/fluidPic/confirmUpdate',param).then(
            //         Response =>{
            //           this.fluidPicList = Response.data.data.fluidPicList;
            //           this.dialogOfUpdate = false;
            //           // this.dialogImageUrl = '';
            //           // this.dialogVisible = false;
            //           this.updateFile=[];
            //         }
            // );
            _this.axios({
              method: "post",
              url: "/fluidPic/confirmUpdate",
              data: param,
            }).then(
                    function (resp) {
                      _this.fluidPicList = resp.data.data.fluidPicList;
                      _this.dialogOfUpdate = false;
                      _this.updateFile=[];
                    }
            )
          }
        },
      created() {

          // axios.get('http://localhost:8081/fluidPic/list').then(
          //         Response => {
          //           console.log(Response.data.data.fluidPicList);
          //           this.fluidPicList = Response.data.data.fluidPicList;
          //           // var uu = this.fileList[0].url.substr(this.fileList[0].url.indexOf("blob:")+1);
          //           //   var uu = "blob:123456";
          //           // console.log('uu: '+uu.substring(5));
          //         },
          //         error =>{
          //
          //         }
          // )
        var _this = this;
        _this.axios({
          method: "get",
          url: "fluidPic/list",
        }).then(function (resp) {
          _this.fluidPicList = resp.data.data.fluidPicList;
          }
        )
        console.log(_this.axios.url);
      }
    }
</script>

<style scoped>

</style>
